import { BsEarbuds } from 'react-icons/bs'
import { HiPlay } from 'react-icons/hi'
import { transformNumberToWords } from '../../utils'
import { PlayCardContainer, PlayCardItem } from './style'
import LazyImage from '../LazyImage'
import { useNavigate } from 'react-router'
export default function PlayListCard({ list=[],title='' }) {
	const navigate = useNavigate()

	const toPlayListDetail = (playListId) => {
		navigate(`/discover/playListDetails/${playListId}`)
	}
	return (
		<PlayCardContainer title={title}>
			{list.map((item) => {
				return (
					<PlayCardItem onClick={() => toPlayListDetail(item.id)} key={item.id}>
						{/* ===懒加载封面 和 hover播放按钮 放在一个容器内，保证悬浮的显示区域，不占满整个item容器，只用保证和img大小一样就可以了===*/}
						<div className="cover-container">
							<LazyImage className="cover-image" src={item.picUrl} />
							<div className="hover-play-icon">
								<HiPlay />
							</div>
						</div>
						{/* ===歌单名称=== */}
						<p className='name' onClick={() => toPlayListDetail(item.id)}>{item.name}</p>
						{/* ===收听详情=== */}
						<div className="listenInfo">
							<BsEarbuds />
							<span className="count">{transformNumberToWords(item.playCount)}</span>
						</div>
					</PlayCardItem>
				)
			})}
		</PlayCardContainer>
	)
}
